<template>
<div class="template">
    <h2>示例</h2>
    <div class="u-swiper">
        <el-carousel indicator-position="outside" loop :autoplay-speed="3000" :key="carouselKey">
            <el-carousel-item v-for="(item,index) in swiperData" :key="index">
                <div class="swiper-item">
                    <a :href="item.linkUrl" target="_blank"><img :src="item.imageUrl"></a>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <!--  -->
    <div class="markdown-body">
        <swiper1MD></swiper1MD>
    </div>
</div>
</template>
<script>
import swiper1MD from "../md/swiper1MD.md"
export default {
    name:"swiper",
    components:{swiper1MD},
    data(){
        return{
            carouselKey:0,
            swiperData:[{"title": "1","imageUrl": "http://zxjypt.sggf.com:8080/upload/cms/image/16111198795121.png","linkUrl": ""},
            {"title": "西域","imageUrl": "http://zxjypt.sggf.com:8080/upload/cms/image/16053178054020.jpg","linkUrl": ""},
            {"title": "震坤行","imageUrl": "http://zxjypt.sggf.com:8080/upload/cms/image/16053179218782.jpg","linkUrl": ""},
            {"title": "工品汇","imageUrl": "http://zxjypt.sggf.com:8080/upload/cms/image/16053179137803.jpg","linkUrl": ""},
            {"title": "固安捷","imageUrl": "http://zxjypt.sggf.com:8080/upload/cms/image/16053178157153.jpg","linkUrl": ""},
            {"title": "艾逊","imageUrl": "http://zxjypt.sggf.com:8080/upload/cms/image/16053178705832.jpg","linkUrl": ""}],
        }
    }
}
</script>
<style scoped>
.u-swiper{
    margin: 0 auto;
    /* width: 720px; */
}
.u-swiper .el-carousel__container{
    height: 374px!important;
}
.u-swiper .swiper-item {
  height: 374px!important;
}
.u-swiper .swiper-item img {
  height: 374px;
  width: 100%;
}
.template{
    width: 100%;
}
.template h2{
    width: 100%;
    text-align: left;
}
</style>